<template>
  <div class="salary-page">
    <div class="content-area">
      <!-- 月份选择器 -->
      <div class="month-picker">
        <div class="current-month" @click="showMonthPicker = true">
          <span>{{ currentYear }}年{{ currentMonth }}月</span>
          <van-icon name="arrow-down" />
        </div>
      </div>
      
      <!-- 工资卡片 -->
      <div class="salary-card" v-if="salaryData">
        <div class="card-header">
          <div class="card-title">{{ currentYear }}年{{ currentMonth }}月工资条</div>
          <van-tag type="primary">已发放</van-tag>
        </div>
        
        <div class="total-section">
          <div class="total-label">税后实发</div>
          <div class="total-amount">¥{{ formatAmount(salaryData.netPay) }}</div>
        </div>
        
        <div class="divider"></div>
        
        <!-- 收入明细 -->
        <div class="detail-section">
          <div class="section-title">
            <span>收入项</span>
            <span class="section-amount">¥{{ formatAmount(salaryData.totalIncome) }}</span>
          </div>
          <div class="detail-item" v-for="(amount, name) in salaryData.incomeItems" :key="name">
            <div class="item-name">{{ name }}</div>
            <div class="item-amount">¥{{ formatAmount(amount) }}</div>
          </div>
        </div>
        
        <!-- 扣除明细 -->
        <div class="detail-section">
          <div class="section-title">
            <span>扣除项</span>
            <span class="section-amount">¥{{ formatAmount(salaryData.totalDeduction) }}</span>
          </div>
          <div class="detail-item" v-for="(amount, name) in salaryData.deductionItems" :key="name">
            <div class="item-name">{{ name }}</div>
            <div class="item-amount">¥{{ formatAmount(amount) }}</div>
          </div>
        </div>
        
        <div class="actions">
          <van-button icon="share-o" plain size="small" @click="shareSalary">分享</van-button>
          <van-button icon="down" plain size="small" @click="downloadSalary">下载</van-button>
        </div>
      </div>
      
      <!-- 历史工资记录 -->
      <div class="history-section">
        <div class="section-header">
          <div class="section-title">历史工资记录</div>
        </div>
        
        <div class="salary-history">
          <div 
            v-for="item in salaryHistory" 
            :key="item.yearMonth"
            class="history-item"
            @click="selectMonth(item.year, item.month)"
          >
            <div class="history-date">{{ item.year }}年{{ item.month }}月</div>
            <div class="history-amount">¥{{ formatAmount(item.netPay) }}</div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      
      <!-- 月份选择器弹出层 -->
      <van-popup v-model:show="showMonthPicker" position="bottom" round>
        <van-date-picker
          v-model="selectedDate"
          title="选择月份"
          type="year-month"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onMonthConfirm"
          @cancel="showMonthPicker = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { NavBar, Empty, Icon, Tag, Button, Popup, DatePicker, Toast } from 'vant'
import 'vant/es/toast/style'

export default {
  name: 'FinanceSalary',
  components: {
    vanNavBar: NavBar,
    vanEmpty: Empty,
    vanIcon: Icon,
    vanTag: Tag,
    vanButton: Button,
    vanPopup: Popup,
    vanDatePicker: DatePicker
  },
  setup() {
    const router = useRouter()
    
    // 日期相关
    const today = new Date()
    const currentYear = ref(today.getFullYear())
    const currentMonth = ref(today.getMonth() + 1)
    const selectedDate = ref(new Date())
    const showMonthPicker = ref(false)
    
    // 日期选择器范围
    const minDate = new Date(today.getFullYear() - 5, 0)
    const maxDate = new Date(today.getFullYear(), today.getMonth())
    
    // 当前工资数据
    const salaryData = ref(null)
    
    // 工资历史记录
    const salaryHistory = ref([])
    
    // 格式化金额
    const formatAmount = (amount) => {
      return parseFloat(amount).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    }
    
    // 获取工资数据
    const fetchSalaryData = (year, month) => {
      // 这里应该调用API获取工资数据
      // 模拟API请求
      setTimeout(() => {
        // 模拟数据
        salaryData.value = {
          yearMonth: `${year}-${month.toString().padStart(2, '0')}`,
          netPay: 8562.35, // 税后实发
          totalIncome: 10500.00, // 收入合计
          totalDeduction: 1937.65, // 扣除合计
          incomeItems: {
            '基本工资': 6500.00,
            '绩效工资': 2500.00,
            '岗位津贴': 800.00,
            '加班工资': 500.00,
            '其他补贴': 200.00
          },
          deductionItems: {
            '个人所得税': 485.65,
            '养老保险': 520.00,
            '医疗保险': 365.00,
            '失业保险': 65.00,
            '住房公积金': 502.00
          }
        }
      }, 500)
    }
    
    // 获取工资历史记录
    const fetchSalaryHistory = () => {
      // 这里应该调用API获取工资历史记录
      // 模拟API请求
      setTimeout(() => {
        // 模拟数据
        const history = []
        const currentDate = new Date()
        for (let i = 0; i < 12; i++) {
          const date = new Date(currentDate)
          date.setMonth(date.getMonth() - i)
          const year = date.getFullYear()
          const month = date.getMonth() + 1
          
          history.push({
            year,
            month,
            yearMonth: `${year}-${month.toString().padStart(2, '0')}`,
            netPay: 8000 + Math.random() * 1500
          })
        }
        salaryHistory.value = history
      }, 500)
    }
    
    // 选择月份
    const selectMonth = (year, month) => {
      currentYear.value = year
      currentMonth.value = month
      fetchSalaryData(year, month)
    }
    
    // 月份选择器确认
    const onMonthConfirm = (value) => {
      const date = new Date(value)
      currentYear.value = date.getFullYear()
      currentMonth.value = date.getMonth() + 1
      showMonthPicker.value = false
      fetchSalaryData(currentYear.value, currentMonth.value)
    }
    
    // 分享工资条
    const shareSalary = () => {
      Toast('分享功能开发中...')
    }
    
    // 下载工资条
    const downloadSalary = () => {
      Toast('下载功能开发中...')
    }
    
    onMounted(() => {
      fetchSalaryData(currentYear.value, currentMonth.value)
      fetchSalaryHistory()
    })
    
    return {
      currentYear,
      currentMonth,
      selectedDate,
      showMonthPicker,
      minDate,
      maxDate,
      salaryData,
      salaryHistory,
      formatAmount,
      selectMonth,
      onMonthConfirm,
      shareSalary,
      downloadSalary
    }
  }
}
</script>

<style scoped>
.salary-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.content-area {
  padding: 16px;
}

.month-picker {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 20px;
  padding: 8px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.current-month .van-icon {
  margin-left: 8px;
  color: #1989fa;
}

.salary-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
}

.total-section {
  text-align: center;
  margin-bottom: 20px;
}

.total-label {
  font-size: 14px;
  color: #646566;
  margin-bottom: 4px;
}

.total-amount {
  font-size: 28px;
  font-weight: bold;
  color: #1989fa;
}

.divider {
  height: 1px;
  background-color: #f2f2f2;
  margin: 16px 0;
}

.detail-section {
  margin-bottom: 16px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 500;
}

.section-amount {
  font-weight: normal;
  color: #1989fa;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
}

.item-name {
  color: #646566;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.history-section {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-header {
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f2;
  cursor: pointer;
}

.history-item:last-child {
  border-bottom: none;
}

.history-date {
  font-size: 14px;
}

.history-amount {
  font-weight: 500;
  color: #1989fa;
  margin-right: 12px;
}
</style> 